<%--
  Created by IntelliJ IDEA.
  User: 林不清
  Date: 2020/12/8
  Time: 10:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <link rel="stylesheet" href="css/login.css">
    <script type="text/javascript" src="js/login.js"></script>
</head>

<body>
<script type="text/javascript">
    $(function() {
        // 初始化省市区
        initAddress();
        // 更改省份后的操作
        $("select[name='province']").change(function() {
            var provCode = $("select[name='province']").val();
            getCity(provCode);
        });
        // 更改城市后的操作
        $("select[name='city']").change(function() {
            var cityCode = $("select[name='city']").val();
            getArea(cityCode);
        });
    });

    function initAddress() {
        var firstProvCode;
        // ajax请求所有省份
        $.get("AddressServlet", {
            method : "initProvince"
        }, function(data) {
            $.each(data, function(i, d) {
                $("select[name='province']").append(
                    "<option value='"+d.code+"'>" + d.name
                    + "</option>");
            });
            // 获取第一个省份的code
            firstProvCode = data[0].code;
            console.log(firstProvCode)
            // 根据第一个省份code获取对应城市列表
            getCity(firstProvCode);
        }, 'json');
    }

    //获取对应城市列表（里面包括获取第一个城市的区县列表）
    function getCity(provCode) {
        var firstCityCode;
        // ajax请求所有市级单位
        $.get("AddressServlet", {
            method : "getCity",
            provCode : provCode
        }, function(data) {
            // 先清空城市下拉框
            $("select[name='city']").empty();
            $.each(data, function(i, d) {
                $("select[name='city']").append(
                    "<option value='"+d.code+"'>" + d.name
                    + "</option>");
            });
            // 获取第一个城市的code
            firstCityCode = data[0].code;
            // 根据第一个城市code获取对应区县列表
            getArea(firstCityCode);
        }, 'json');
    }

    function getArea(cityCode) {
        // ajax请求所有区县单位
        $.get("AddressServlet", {
            method : "getArea",
            cityCode : cityCode
        }, function(data) {
            // 先清空区县下拉框
            $("select[name='area']").empty();
            $.each(data, function(i, d) {
                $("select[name='area']").append(
                    "<option value='"+d.code+"'>" + d.name
                    + "</option>");
            });
        }, 'json');
    }
</script>
<%request.setCharacterEncoding("utf-8");%>
<div class="backgrounds" id="backgrounds">
<div class="content" id="div_position" style="background: rgba(150,150,150,0.5); border-radius: 25px;width:420px; height:480px;text-decoration: none;font-size:14px;" >

    <div id="div_framwork" style="margin-left: 20px;margin-top: -20px">
        <form action="/FinalWork/register.jhtml" method="post" name="log_reg_form" id="log_reg_form">
            <br>
            <div id="contents" class="contents" style="color:red;">${message}</div>

            <a style="color: red">*</a>
            <input type="text" value="您的用户名" name="username" id="username" class="text">&nbsp;
            <a id="unameTips"></a>
            <br><br>
            <a style="color: red">*</a>
            <input type="text" name="pwd" id="pwd" value="您的密码" class="text">&nbsp;
            <a id="upwdTips"></a>
            <br><br>
            <a style="color: red">*</a>
            <input type="text" name="pwd_repeat" id="pwd_repeat" class="text" value="请再次确认密码">&nbsp;
            <a id="upwd_repeatTips" ></a> <br><br>
            <a style="color: red">*</a>
            <input type="text" name="phone" id="phone" class="text" value="请输入手机号">&nbsp;
            <a id="uphoneTips"></a> <br><br>
            <a style="color: red">*</a>
            <input type="text" name="mailcode" id="mailcode" class="text" value="请输入邮箱">
            <a id="umailcodeTips"></a> <br><br>
            <a style="color: red">*</a>
            <img src="code.jhtml" width="120px" height="40px"
                 onclick="javascript:this.src='code.jhtml?id='+new Date().getMilliseconds()">
            <input type="text" name="code" class="text identify" id="code" value="验证码">&nbsp;<a id="ucodeTips"></a>
            <br><br>

            <a>请选择：</a>
            <select name='province' id="province"></select>
            <select name='city' id="city"></select>
            <select name='area' id="area"></select>
            <br><br>

            <input class="register_button" id="register_button" value="注册" type="button"/> <br>
            <a href="login.jsp" style="color: ivory; margin-left: 200px">回到登录界面</a>

        </form>
    <div/>


</div>
</div>

</div>
</body>
</html>
